<template>
  <view class="mine-container">
    <!-- 自定义导航栏 -->
    <custom-nav title="汉·瑜伽普拉提" :show-back="false">
      <!-- 自定义右侧内容 -->
      <template #right>
        <view @click="handleShare">
          <uni-icons type="share" size="22"></uni-icons>
        </view>
      </template>
    </custom-nav>

    <view class="mine-content" :style="{ paddingTop: navHeight + 'px' }">
      <view class="user-content">
        <!-- 用户信息卡片 -->
        <user-info-card />
      </view>
    </view>

    <view class="other-content">
      <!-- 快捷功能导航 -->
      <quick-nav />

      <!-- 训练日历 -->
      <training-calendar />

      <function-menu />
    </view>
    <!-- 底部导航栏 -->
    <tab-bar />
  </view>
</template>

<script setup>
import UserInfoCard from "./components/user-info-card.vue";
import QuickNav from "./components/quick-nav.vue";
import TrainingCalendar from "./components/training-calendar.vue";
import FunctionMenu from "./components/function-menu.vue";
import { useNavHeight } from "@/utils/useNavHeight";
import TabBar from "@/components/TabBar.vue";
import { onMounted } from "vue";
import { getUserInfoAPI } from "@/apis/user";
import { useUserStore } from "@/store";
import { onShow } from "@dcloudio/uni-app";

const { navHeight } = useNavHeight();
const userStore = useUserStore();
const { userInfo } = userStore;

const getUserInfo = async () => {
  const { code, data } = await getUserInfoAPI();
  console.log("getUserInfo", data);
  if (code === "200") {
    userStore.setUserInfo(data);
  }
};
onShow(() => {
  console.log("userInfo 执行了", userStore, userInfo);
  if (userStore.token) {
    // 获取用户信息
    getUserInfo();
  }
});
</script>

<style scoped lang="scss">
.mine-container {
  min-height: 100vh;
  padding-top: 30rpx;
  padding-bottom: calc(0rpx + var(--safe-area-inset-bottom));

  .mine-content {
    position: relative;
    background: linear-gradient(to bottom, #8cb22c 40%, #ececde);
    padding: 30rpx 22rpx;
  }

  .other-content {
    background: #ececde;
    border-top: 4rpx solid #c1c1c1;
    padding: 0 26rpx;
    padding-bottom: 160rpx;
  }
}
</style>